<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者：offline
        	时间：2018-06-30
        	描述：各元素块间距为0，auto 自动效果居中 给body设一个整体宽度避免浮动影响
        -->
		<style>
			*{
				padding: 0;
				margin: 0 auto;
			}
			
			body{
				width: 500px;
			}
		/*	.clear{
				clear: both;
			}*/
		</style>
	</head>
	<body>
		<div style="width: 500px;height: 30px;border-bottom:1px solid gainsboro; " >
			<!--<ul style="list-style: none;">
				<li style="float: left;"><img src="img/131.jpg" width="20px"height="20px
				" /> </li>
				<li style="float: left;color: blue;">在线留言</li>
				<li style="float: right;">首页>用户留言</li>
			</ul>-->
			<span style="float: left;"><img src="img/131.jpg" width="30px"height="30px" />
			</span>
			<span style="float: left; color:blue;  font-size: 16px;
				line-height: 30px; font-family: '黑体';">在线留言</span>
			<span style="float: right;font-size: 16px;line-height: 30px; 
				color: darkgray;">首页>用户留言</span>
		</div>
		<!--<div class="clear"></div>-->
		<div >
		<form>	
		<table  height="350px" width="500px" border="1" bordercolor="gainsboro" 
			 cellpadding="0" cellspacing="0" style="margin-top: 25px; ">
			<tr>
			    <td style="font-size: 16px;text-align: right; width: 150px;
			    	padding-right: 15px;">你的名字
			    	<p style="color: lightgray;font-size: 10px">YOUR NAME</p></td>
			    <td>
			    		<input style="margin-left:10px;
			    			padding-left: 15px;height: 28px;width: 250px; 
			    			border: 1px solid gainsboro;" 
			    			type="text" placeholder="如）张三"  />
			    </td>
				
			</tr>
			<tr>
				<td style="font-size: 16px;text-align: right;padding-right: 15px;">
					联系电话
					<p style="color: lightgray;font-size: 10px">CONTACT PHONE</p>
				</td>
				<td>
					<input style="margin-left:10px;padding-left: 15px; height: 28px;width: 250px;
						 border: 1px solid gainsboro;" 
						type="text" placeholder="如）15022258558"  />
				</td>
			</tr>
			<tr>
		        <td style="font-size: 16px;text-align: right;padding-right: 15px;">
		        	邮箱 
		        	<p style="color: lightgray;font-size: 10px">
		        		YOUR EMALT
		        	</p>
		        </td>
				<td>
					<input style="margin-left:10px;
						padding-left: 15px;padding-left: 15px;height: 28px;
						width: 250px; border: 1px solid gainsboro;" 
						type="text" placeholder="如）1524518@qq.com"  />
				</td>
			</tr>
			<tr>
			    <td style="font-size: 16px;text-align: right;padding-right: 15px;">
			    	所在地址
			    	<p style="color: lightgray;font-size: 10px">YOUR ADDRESS
			    	</p>
			    </td>
				<td>
					<input style="margin-left:10px;
						padding-left: 15px;padding-left: 15px;height: 28px;
						width: 250px; border: 1px solid gainsboro;" 
						type="text" placeholder="请填写你所在的省市"  />
				</td>
			</tr>
			
			<tr >
			    <td style="font-size: 16px;text-align: right;padding-right: 15px;">
			    	留言内容
			    	<p style="color: lightgray;font-size: 10px">
			    		MESSADG CONTENT
			    	</p>
			    </td>
				<td>
					<textarea style="margin-left:10px;padding-left: 15px;
						padding-left: 15px;height: 56px;
						width: 250px; border: 1px solid gainsboro;
						"placeholder="请填写留言内容">
					</textarea>
				</td>
			</tr>
			<tr>
			    <td></td>
				<td>
					<input style="height: 28px;width:150px;
						 margin-left:10px;" type="submit"value="提交留言" />
				</td>
			</tr>
			
		</table>
		</form>
		</div>
			
		
	</body>
</html>
